<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资产环境管理</el-breadcrumb-item>
      <el-breadcrumb-item>SLB信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">

      <el-table :data="tableData"
                style="width: 100%;
                margin-top: -10px;line-height: 70px;"
      >
        <el-table-column prop="SlbName" label="SLB_名称">
        </el-table-column>
        <el-table-column prop="SlbCreateTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="SlbAddr" label="SLB_IP">
        </el-table-column>
        <el-table-column prop="SlbStatus" label="状态" width="70px;">
          <template slot-scope="scope">
            <p class="el-icon-success" v-if="scope.row.SlbStatus === 'active'"></p>
            <p class="el-icon-error" v-else></p>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import { getMoment } from '../utils/timeFilter'
  import axios from 'axios'
  export default {
    filters: {
      getMoment
    },
    data: function () {
      return {
        tableData: []
      }
    },
    mounted () {
      this.loadData()
    },
    methods: {
      loadData: function () {
        axios.get(`${this.cmdbUrl}/Slbinfo`).then(
          response => {
            this.tableData = response.data.data
          })
      }
    }
  }
</script>

<style>
  .box-card {
    width: 100%;
    margin-top: 10px;
  }
</style>
